React useEvent: Bardoshli Ilovalar Uchun Hodisa Handlerlarini Barqarorlashtirish

useEventni Amalda Qo'llash

Keling, avvalgi misollarni ko'rib chiqaylik va muammolarni hal qilish uchun `useEvent`ni qo'llaylik.

Eski Yopiqlarni Tuzatish

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error argumentlar noto'g'ri bo'lishi mumkinligi sababli
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Endi `handleClick` barqaror funksiya, lekin u chaqirilganda, ref orqali eng so'nggi `count` qiymatiga kiradi. Bu eski yopiq muammosini oldini oladi.

Keraksiz Qayta Renderlashlarni Oldini Olish

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error argumentlar noto'g'ri bo'lishi mumkinligi sababli
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Chunki `handleClick` endi barqaror funksiya havolasi, `ChildComponent` faqat uning proplari *haqiqatan* o'zgarganda qayta renderlanadi, bu esa ishlashni yaxshilaydi.

Alternativ Implementatsiyalar va Ko'rib Chiqishlar

`useEvent` `useLayoutEffect` bilan

Ba'zi hollarda, `useEvent` implementatsiyasida `useEffect` o'rniga `useLayoutEffect`dan foydalanish kerak bo'lishi mumkin. `useLayoutEffect` barcha DOM o'zgarishlaridan keyin, lekin brauzer bo'yashdan oldin sinxron ravishda ishlaydi. Hodisa handler tetiklangandan keyin darhol DOMni o'qish yoki o'zgartirish kerak bo'lsa, bu muhim bo'lishi mumkin. Ushbu sozlash sizning hodisa handleringiz ichida eng so'nggi DOM holatini ushlab qolishini ta'minlaydi, bu sizning komponentingiz ko'rsatadigan va u ishlatadigan ma'lumotlar o'rtasidagi mumkin bo'lgan nomuvofiqliqlarni oldini oladi. `useEffect` va `useLayoutEffect` o'rtasidagi tanlov hodisa handleringizning o'ziga xos talablari va DOM yangilanishlarining vaqtiga bog'liq.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Ogohlantirishlar va Mumkin Bo'lgan Muammolar

• Murakkablik: `useEvent` ma'lum muammolarni hal qilsa-da, u kodingizga murakkablik qatlamini qo'shadi. Uni samarali ishlatish uchun asosiy tushunchalarni tushunish muhimdir.
• Keraksiz Ishlatish: `useEvent`ni cheksiz ishlatmang. Faqat eski yopiqlar yoki hodisa handlerlariga bog'liq bo'lgan keraksiz qayta renderlashlarni duch kelsangiz, uni qo'llang.
• Sinov: `useEvent`ni ishlatadigan komponentlarni sinovdan o'tkazish to'g'ri handler mantig'i bajarilishini ta'minlash uchun ehtiyotkorlikni talab qiladi. `useEvent` hookini mock qilish yoki sinovlarda `handlerRef`ga to'g'ridan-to'g'ri kirish kerak bo'lishi mumkin.

Hodisa Boshqaruviga Global Nuqtai Nazarlar

Global auditoriya uchun ilovalarni yaratishda, hodisa boshqaruvida madaniy farqlar va kirish imkoniyatlari talablarini hisobga olish muhimdir:

• Klaviatura Navigatsiyasi: Barcha interaktiv elementlar klaviatura navigatsiyasi orqali kirish mumkinligini ta'minlang. Turli mintaqalardagi foydalanuvchilar nogironlik yoki shaxsiy imtiyozlar tufayli klaviatura navigatsiyasiga tayanadilar.
• Sensorli Hodisalar: Mobil qurilmalardagi foydalanuvchilar uchun sensorli hodisalarni qo'llab-quvvatlang. Mobil internetga kirish desktopga nisbatan keng tarqalgan mintaqalarni ko'rib chiqing.
• Kirish Usullari: Dunyo bo'ylab ishlatiladigan turli xil kirish usullarini, masalan, Xitoy, Yaponiya va Koreya kirish usullarini hisobga oling. Hodisalar to'g'ri boshqarilishini ta'minlash uchun ushbu kirish usullari bilan ilovangizni sinovdan o'tkazing.
• Kirish Imkoniyati: Har doim kirish imkoniyati bo'yicha eng yaxshi amaliyotlarni kuzatib boring, hodisa handlerlaringiz ekran o'quvchilari va boshqa yordamchi texnologiyalar bilan mos kelishini ta'minlang. Bu, ayniqsa, turli madaniy kelib chiqishlar uchun inklyuziv foydalanuvchi tajribalari uchun juda muhimdir.
• Vaqt Zonlari va Sana/Vaqt Formatlari: Sana va vaqtni o'z ichiga olgan hodisalar bilan ishlashda (masalan, taqvim vositalari, uchrashuv kalendarlari), turli mintaqalarda ishlatiladigan vaqt zonalarini va sana/vaqt formatlarini hisobga oling. Foydalanuvchilarga ularning joylashuviga qarab ushbu sozlamalarni moslashtirish imkoniyatlarini taqdim eting.

useEventga Alternativlar

Agar `useEvent` kuchli usul bo'lsa-da, Reactda hodisa handlerlarini boshqarish uchun muqobil yondashuvlar mavjud:

• Holatni Ko'tarish: Ba'zida eng yaxshi yechim - hodisa handler qaram bo'lgan holatni yuqori darajadagi komponentga ko'tarishdir. Bu hodisa handlerini soddalashtirishi va `useEvent` zaruriyatini yo'q qilishi mumkin.
• `useReducer`:** Agar sizning komponentingiz holat mantig'i murakkab bo'lsa, `useReducer` holat yangilanishlarini yanada ishonchli boshqarishga va eski yopiqlar ehtimolini kamaytirishga yordam beradi.
• Sinf Komponentlari: Zamonaviy Reactda kamroq uchrasa-da, sinf komponentlari hodisa handlerlarini komponent instansiyasiga bog'lash uchun tabiiy yo'lni taqdim etadi, bu yopiq muammosidan qochadi.
• Inline Funksiyalar Dependensiyalar Bilan: Yadroli qiymatlar hodisa handlerlariga o'tkazilishini ta'minlash uchun dependensiyalar bilan inline funksiya qo'ng'iroqlaridan foydalaning. `onClick={() => handleClick(arg1, arg2)}` `arg1` va `arg2` holat orqali yangilangan bo'lsa, har bir renderlashda yangi anonim funksiyani yaratadi, shu bilan yangilangan yopiq qiymatlarni ta'minlaydi, lekin `useEvent` hal qiladigan keraksiz qayta renderlashlarni keltirib chiqaradi.